<template>
  <div class="recommend">
    <div class="header">
      <img src="../../assets/image/day.jpeg" />
      <van-sticky>
        <img ref="topImg" class="top" src="../../assets/image/day.jpeg" />
        <div class="headSvg">
          <SvgView ion="#icon-zuojiantou" @click="$router.push('/home')" />
          <p style="color: white">每日推荐</p>
          <SvgView ion="#icon-gengduo-shuxiang" />
        </div>
      </van-sticky>
      <div class="dayTime">
        <div class="left">
          <div class="day">
            <h1>
              {{
                  new Date().getDate() >= 10
                    ? new Date().getDate()
                    : "0" + new Date().getDate()
              }}
            </h1>
            /
            <span>{{
                new Date().getMonth() + 1 >= 10
                  ? new Date().getMonth() + 1
                  : "0" + (new Date().getMonth() + 1)
            }}</span>
          </div>
          <div class="today">
            查看今日运势
            <SvgView ion="#icon-youjiantou" />
          </div>
        </div>
        <div class="right">历史日推</div>
      </div>
    </div>
    <div class="musicContent">
      <van-sticky :offset-top="40">
        <div class="play">
          <div class="playLeft">
            <SvgView ion="#icon-bofang-copy" />
            <p>播放全部</p>
          </div>
          <div class="playRight">
            <SvgView ion="#icon-show_duoxuan" />
          </div>
        </div>
      </van-sticky>
      <div class="musicList">
        <div class="musicListItem" v-for="(item, index) in dayArr.dailySongs" :key="item.id">
          <div class="itemLeft" @click="changeMusic(index)">
            <img :src="item.al.picUrl" alt="">
            <div class="itemName">
              <div class="flag">
                <h4>{{ item.name }}</h4>
                <span v-if="formatting(item.id)">{{ formatting(item.id) }}</span>
              </div>
              <span>{{
                  item.ar
                    .reduce((a, b) => {
                      return (a += b.name + ",");
                    }, "")
                    .slice(0, -1)
              }}</span>
            </div>
          </div>
          <div class="itemRight">
            <SvgView ion="#icon-shipin" v-if="item.mv != 0" />
            <SvgView ion="#icon-gengduo-shuxiang" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import SvgView from "@/components/SvgView.vue";
import { onMounted, reactive, ref, onUnmounted } from "vue";
import { getRecommend, getPlaySongDetail } from "../../assets/axios/api";
import { useMusicStore } from "@/store/store.js";
const musicStore = useMusicStore();
const topImg = ref()
const dayArr = reactive({
  dailySongs: '',
  recommendReasons: ""
});
const music = ref('')

onMounted(() => {
  getRecommend().then(async (res) => {
    dayArr.dailySongs = res.data.data.dailySongs
    dayArr.recommendReasons = res.data.data.recommendReasons
    let ids = dayArr.dailySongs.reduce((cur, old) => {
      return cur += old.id + ','
    }, '').slice(0, -1)
    let respond = await getPlaySongDetail(ids)
    music.value = respond.data.songs
  });
  scrollTop()
  window.addEventListener('scroll', scrollTop, true)

});
onUnmounted(() => {
  window.removeEventListener('scroll', scrollTop, true)
})
const changeMusic = (idx) => {
  musicStore.changePlayList(music.value);
  musicStore.changePlayIndex(0, idx);
  musicStore.changePlayReady(true);
  musicStore.getMusicLyric();
  musicStore.changeFM(false)
  musicStore.changePlayPop(true)
};
const formatting = (id) => {
  let a = ''
  dayArr.recommendReasons.forEach((v) => {
    if (v.songId === id) {
      a = v.reason
    }
  })
  return a
}
const scrollTop = () => {
  let scroll = document.documentElement.scrollTop || document.body.scrollTop
  if (scroll < 200) {
    topImg.value && (topImg.value.style.visibility = 'hidden');
  } else {
    topImg.value && (topImg.value.style.visibility = 'visible');
  }
}
</script>

<style scoped lang="less">
.recommend {
  .header {
    height: 240px;
    overflow: hidden;
    position: relative;

    img {
      width: 100%;
      filter: blur(10px);
      display: block;
      margin-bottom: 20px;
      position: absolute;
      top: 0;
      z-index: -1;
    }

    .top {
      visibility: hidden;
      width: 100%;
      filter: blur(0px);
      height: 40px;
    }

    .headSvg {
      width: 100%;
      height: 40px;
      padding: 0 15px;
      padding-top: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1;

      .icon {
        margin: 0;
        fill: white;
      }
    }

    .dayTime {
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 15px;
      margin-top: 100px;
      color: white;

      .left {
        .day {
          h1 {
            display: inline-block;
            margin: 0 3px;
          }

          span {
            margin: 0 3px;
          }
        }

        .today {
          font-size: 10px;

          .icon {
            height: 10px;
            height: 10px;
            fill: #cccaca92;
          }
        }
      }

      .right {
        font-size: 10px;
        background-color: #c7c7c778;
        padding: 5px 20px;
        border-radius: 30px;
      }
    }
  }

  .musicContent {
    width: 100%;
    z-index: -3;

    .play {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: 10px 0;

      .playLeft,
      .playRight {
        display: flex;
        align-items: center;
        margin: 0 5px;

        .icon {
          margin: 0 5px;
        }

        p {
          font-size: 0.4rem;

          span {
            font-size: 0.2rem;
            color: silver;
            margin-left: 5px;
          }
        }
      }
    }

    .musicList {
      background-color: white;
      margin-bottom: 50px;

      .musicListItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;

        .itemLeft {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 0 10px;

          >img {
            height: 35px;
            width: 35px;
            border-radius: 5px;
          }

          .itemName {
            margin-left: 15px;

            .flag {
              display: flex;
              align-items: center;
              width: 220px;

              h4 {
                margin-bottom: 3px;
                font-weight: bolder;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 16px;
              }

              span {
                margin-left: 3px;
                background-color: #ff000032;
                padding: 2px 3px;
                font-size: 10px;
                color: #ff0000;
              }
            }

            >span {
              display: block;
              width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: silver;
              font-size: 8px;
            }
          }
        }

        .itemRight {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 0 10px;

          .icon {
            margin: 0 5px;
            width: 15px;
            height: 15px;
          }
        }
      }
    }
  }
}
</style>
